<template>
  <div class="big">
    <div class="banxin">
      <p class="top">
        <span @click="$router.push(`/`)">首页</span>
        <span class="center">/</span>
        <span class="active">更多</span>
      </p>
      <div class="imgs">
        <img src="@/assets/images/home/ad.png" alt="" />
      </div>
      <ul class="firstul tanxin">
        <li class="first">排序:</li>
        <li :class="{ active2: firsttive === 1 }" @click="firstClick0">全部</li>
        <li :class="{ active2: firsttive === 2 }" @click="firstClick1">
          我能兑换的
        </li>
        <li :class="{ active2: firsttive === 3 }" @click="firstClick2">
          0-500分
        </li>
        <li :class="{ active2: firsttive === 4 }" @click="firstClick3">
          500- 1000分
        </li>
        <li :class="{ active2: firsttive === 5 }" @click="firstClick4">
          1000-1500分
        </li>
        <li :class="{ active2: firsttive === 6 }" @click="firstClick5">
          1500-2500分
        </li>
        <li :class="{ active2: firsttive === 7 }" @click="firstClick6">
          2500-6500分
        </li>
        <li :class="{ active2: firsttive === 8 }" @click="firstClick7">
          6500-10000分
        </li>
      </ul>
      <ul class="lastul tanxin">
        <li class="first">分类:</li>
        <li :class="{ active2: lasttive === 1 }" @click="type0">全部</li>
        <li :class="{ active2: lasttive === 2 }" @click="type1">实物商品</li>
        <li :class="{ active2: lasttive === 3 }" @click="type2">虚拟商品</li>
      </ul>
      <Goodsli :datas="$store.state.itemsData" :key="$store.state.updataKey"></Goodsli>
    </div>
  </div>
</template>

<script>
import Goodsli from "@/components/home/Hot.vue";
import { getHomeMultidata } from "@/request/api";
export default {
  data() {
    return {
      firsttive: 1,
      lasttive: 1,
      items: {
        min: 0,
        max: 0,
        type: 0,
        keyword:''
      },
    };
  },
  methods: {
    getdatas() {
      this.$store.commit("changeitems", this.items);
      getHomeMultidata(this.$store.state.items).then((res) => {
        this.$store.state.itemsData = res.data.data;
      });
    },
    getURL() {
      return window.location.href.substring(
        0,
        window.location.href.indexOf("?")
      );
    },
    firstClick0() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 0;
      this.items.max = 0;
      this.getdatas();
      this.firsttive = 1;
    },
    firstClick1() {
      if (this.$store.state.myChicken == "--") {
        this.$store.dispatch("AsyncToast", {
          value: "请先登录",
          icon: "danger",
        });
        return;
      }
      this.items.keyword = ''
      this.items.min = 0;
      window.history.replaceState(null, null, this.getURL());
      
      this.items.max = this.$store.state.myChicken;
      this.getdatas();
      this.firsttive = 2;
    },
    firstClick2() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 0;
      this.items.max = 500;
      this.getdatas();
      this.firsttive = 3;
    },
    firstClick3() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 500;
      this.items.max = 1000;
      this.getdatas();
      this.firsttive = 4;
    },
    firstClick4() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 1000;
      this.items.max = 1500;
      this.getdatas();
      this.firsttive = 5;
    },
    firstClick5() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 1500;
      this.items.max = 2500;
      this.getdatas();
      this.firsttive = 6;
    },
    firstClick6() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 2500;
      this.items.max = 6500;
      this.getdatas();
      this.firsttive = 7;
    },
    firstClick7() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.min = 6500;
      this.items.max = 10000;
      this.getdatas();
      this.firsttive = 8;
    },
    type0() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.type = 0;
      this.getdatas();
      this.lasttive = 1;
    },
    type1() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.type = 1;
      this.getdatas();
      this.lasttive = 2;
    },
    type2() {
      this.items.keyword = ''
      window.history.replaceState(null, null, this.getURL());
      this.items.type = 2;
      this.getdatas();
      this.lasttive = 3;
    },
  },
  components: {
    Goodsli,
  },
  created() {
    if(this.$route.query.keyword){
      this.items.keyword = this.$route.query.keyword
    }else{
      this.items.keyword = ''
    }
    this.getdatas();
  },watch:{
    $route:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal);
        if(newVal.query.keyword!==oldVal.query.keyword){
          this.$router.go(0)
        }
      }
    },deep:true
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.big {
  background-color: #f5f5f5;
}
.top {
  padding-top: 59px;
  font-size: 16px;
  color: #666666;
  line-height: 23px;
  span {
    cursor: pointer;
  }
  .center {
    margin: 0 15px;
  }
  .active {
    color: @black;
    font-weight: 700;
  }
}
.imgs {
  cursor: pointer;
  margin-top: 15px;
  img {
    width: 100%;
  }
}
.firstul,
.lastul {
  cursor: pointer;
  margin: 32px 0;
  justify-content: left;
  font-size: 16px;
  line-height: 23px;
  .first {
    font-weight: bold;
    color: @black;
  }
  li {
    margin-right: 15px;
    color: #ccc;
    &.active2 {
      color: @blue;
      font-weight: 700;
    }
  }
}
</style>